<template>
	<s-layout class="widthdraw-log-wrap" title="货款记录" :navbar="'normal'" :bgStyle="{ color: '#fff' }">
		<!-- 记录卡片 -->
		<view class="wallet-log-box ss-p-b-30 ">
			<view class="log-list ss-m-30" v-for="item in state.pagination.data" :key="item">
				<view class="head ss-flex ss-col-center ss-row-between">
					<view class="title">{{item.memo}}</view>
					<view class="num warning-color">{{ item.amount }}元</view>
				</view>
				<view class="time-box ss-m-b-10 item ss-flex ss-col-center ss-row-between">
					<text class="item-title">订单号:</text>
					<view class="time"> {{ item.ext.order_sn }} </view>
				</view>
				<view class="time-box item ss-flex ss-col-center ss-row-between">
					<text class="time">{{ item.createtime }}</text>
					<text class="item-title">余额：{{ item.after }}元</text>
				</view>
			</view>
		</view>
		<!-- <s-empty v-if="state.pagination.total == 0" icon="/static/comment-empty.png" text="暂无货款记录"></s-empty> -->
		<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
        contentdown: '点击加载更多',
      }" @tap="loadmore" />
		<uni-load-more v-if="state.pagination.total ==  0" :status="state.loadStatus" :content-text="{
	    contentdown: '暂无记录' }"/>
	</s-layout>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import _ from 'lodash';
	const state = reactive({
		pagination: {
			data: [],
			current_page: 1,
			total: 1,
			last_page: 1,
		},
		loadStatus: '',
	});

	async function getList(page = 1, list_rows = 8) {
		state.loadStatus = 'loading';
		let res = await sheep.$api.user.wallet.log({
			type: 'payment_goods',
			list_rows,
			page,
			tab: 'all',
		});
		if (res.code === 1) {
			let list = _.concat(state.pagination.data,res.data.list.data);
			state.pagination = {
				...res.data.list,
				data: list,
				income: res.data.income,
				expense: res.data.expense,
			};
			if (state.pagination.current_page < state.pagination.last_page) {
				state.loadStatus = 'more';
			} else {
				state.loadStatus = 'noMore';
			}
		}
	}
	
	// 加载更多
	function loadmore() {
		if (state.loadStatus !== 'noMore') {
			getList(state.pagination.current_page + 1);
		}
	}
	onLoad(() => {
		getList();
	});
	onReachBottom(() => {
		loadmore();
	});
</script>

<style lang="scss" scoped>
	// 记录卡片
	.log-list {
		min-height: 190rpx;
		background: $white;
		margin-bottom: 10rpx;
		padding-bottom: 10rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 8rpx 8rpx #eee;

		.head {
			padding: 0 35rpx;
			height: 80rpx;
			border-bottom: 1rpx solid $gray-e;
			margin-bottom: 20rpx;

			.title {
				font-size: 28rpx;
				font-weight: 500;
				color: $dark-3;
			}

			.num {
				font-size: 28rpx;
				font-weight: 500;
			}
		}

		.item {
			padding: 0 30rpx;

			.item-icon {
				color: $gray-d;
				font-size: 36rpx;
				margin-right: 8rpx;
			}

			.item-title {
				font-size: 26rpx;
				font-weight: 400;
				color: #666666;
			}

			.time {
				font-size: 26rpx;
				font-weight: 400;
				color: #c0c0c0;
			}
		}
	}

	.warning-color {
		color: #faad14;
	}

	.danger-color {
		color: #ff4d4f;
	}

	.success-color {
		color: #67c23a;
	}
</style>